<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>WeUI</title>
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/perInfo.css"/>
    <script type="text/javascript" src="../jQuery/jquery-3.3.1.js"></script>
    <script src="../js/jquery.form.min.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/main.js"></script>
    <title>用户注册</title>
</head>

<body>

<div id="d" style="padding-bottom:10%;width:100%;height:0;margin-top: 1rem;background-color: black;margin-top: 0px;">
    <div style="width:70%;margin:auto auto;">
        <img src="../img/index/top.png" style="height: auto;width:100%; margin:auto auto;"/>
    </div>
</div>
<form id="ajForm" method="post">
    <div class="weui-cells weui-cells_form">


        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">用户名</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="username" type="text" placeholder="请输入用户名">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">邮箱账号</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="email" value="" name="email" type="email" placeholder="请输入邮箱账号">
            </div>
        </div>


        <div class="weui-cell  weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="vcode" placeholder="请输入验证码">
            </div>
            <div class="weui-cell__ft">
                <!-- <button class="weui-vcode-btn" ><span id="yz">获取验证码</span></button>-->
                <input type="button" class="weui-vcode-btn" style="background-color: white;" id="btn" value="获取验证码" onclick="settime(this)"/>
            </div>
        </div>


        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="password1" pattern="[0-9A-Za-z.]*" type="password" placeholder="请输入密码">
            </div>
        </div>


        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="password" pattern="[0-9A-Za-z.]*" type="password" placeholder="请再次输入密码">
            </div>
        </div>


        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="number" type="text" placeholder="请输入身份证号">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">真实姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="name" type="text" placeholder="请输入姓名">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">所在单位</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="unit" type="text" placeholder="请输入工作单位">
            </div>
        </div>


        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系方式</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="phone" type="text" placeholder="请输入您的联系方式">
            </div>
        </div>


        <label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
            <span class="weui-agree__text">
                阅读并同意<a href="javascript:void(0);">《相关条款》</a>
            </span>
        </label>


        <div class="weui-btn-area">
            <input type="submit" class="weui-btn  weui-btn_disabled" value="提交" id="showTooltips">
        </div>
    </div>
</form>
<script>
    var countdown = 60;
    $.ajaxSetup({
        xhrFields: {
            withCredentials: isCrossDomain
        }
    });
    $(function () {

        $("#btn").click(function () {
            var email = $("#email").val();

            if((/^\w+@\w+(\.\w+)+$/).test(email)) {
                $.post(mainurl + "email", {email: email}, function (data) {
                    if (checkData(data)) {

                    }
                });
            } else {

                errorInfo("邮箱格式错误");
            }

        });

        $("#weuiAgree").click(function () {
            if ($("#weuiAgree").prop("checked")) {
                $("#showTooltips").attr("class", "weui-btn weui-btn_primary")
            } else {
                $("#showTooltips").attr("class", "weui-btn weui-btn_disabled")
            }

        });
        var options = {
            // 规定把请求发送到那个URL
            url: mainurl + "v4/register",
            // 请求方式
            type: "post",
            // 服务器响应的数据类型
            dataType: "json",
            beforeSubmit: function (formData, jqForm, options) {
                for (i = 0; i < formData.length; i++) {
                    if (formData[i].value == '') {
                        warnInfo("参数不能为空");
                        return false;
                    }
                }
                if(formData[3].value!=formData[4].value) {
                    warnInfo("两次密码不一致");
                    return false
                }
                return true;
            },
            // 请求成功时执行的回调函数
            success: function (data, status, xhr) {
                if (checkData(data)) {
                    successInfo("注册成功");
                    window.location.href='login.html';
                }
            }
        };
        $("#ajForm").ajaxForm(options);

    });


    function settime(obj) {
        var email = $("#email").val();
        if(!(/^\w+@\w+(\.\w+)+$/).test(email)) {
            return;
        }
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = " 获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送" + countdown + "";
            countdown--;
        }
        setTimeout(function () {
            settime(obj)
        }, 1000)
    }

</script>


</body>

</html>